<!-- 普通模式演示(vue) -->
<template>
  <view class="">
    <z-paging ref="paging" v-model="data.dataList" @query="queryList">
      <template #top>
        <view class="top-nav">
          <view class="nav-item " @click="hanleTab(1)" :class="{active:data.tabIndex==1}">个人</view>
          <view class="nav-item" @click="hanleTab(2)" :class="{active:data.tabIndex==2}">企业</view>
        </view>
        <u-line></u-line>
        <view class="bg-color">
          <u-search :placeholder="data.tabIndex==1?'搜索个人名称':'搜索企业名称'" v-model="data.keyword"
                    shape="square" @search="queryList" @clear="queryList"
                    :showAction="false" margin="20rpx" height="80rpx" placeholderColor="rgba(0,0,0,0.4)"
                    style="flex: initial;"></u-search>
        </view>
      </template>
      <view class="p-32">
        <view class="bg-color list-item" v-for="(item,index) in data.dataList" :key="index">
          <view v-if="data.tabIndex == 2">
            <text class="label">企业名称：</text>
            <text class="title">{{ item.company_name }}</text>
          </view>
          <view>
            <text class="label">姓名：</text>
            <text class="title">{{ item.name }}</text>
          </view>
          <view class="">
            <text class="label">手机号码：</text>
            <text class="title">{{ item.cellphone }}</text>
          </view>
          <!--          <view style="" class="icon-right">-->
          <!--            <u-icon name="arrow-rightward" color="#999999" style="margin-left: 5rpx;"></u-icon>-->
          <!--          </view>-->

          <view class="icon-right delete_but" @click="deleteItem(index,item)">删除</view>
        </view>
      </view>

    </z-paging>
    <!--    <view @click="hanleAdd" class="Add">新建<br/>信息</view>-->
  </view>
</template>

<script setup>
import {reactive, ref} from "vue";
import { userSignerDestroy, userSignerList} from "../../../api/module/contract";

const paging = ref(null);
const data = reactive({
  tabIndex: 1,
  dataList: [],
  signer_user_type: 'member',
  userType: {
    1: 'member',
    2: 'user',
  },

  keyword: '',
});

const hanleTab = (index) => {
  data.tabIndex = index;
  data.signer_user_type = data.userType[index];
  paging.value.reload();
}

const queryList = (pageNo, pageSize) => {
  let params = {
    page: pageNo,
    limit: pageSize,
    name: data.keyword,
    signer_user_type: data.signer_user_type,
  }

  userSignerList(params).then(res => {
    paging.value.complete(res.data)
  })
}


const deleteItem = (index, item) => {
  uni.showModal({
    title: '删除签署人',
    content: '确定要删除签署人吗？',
    success: (res) => {
      if (res.confirm) {
        userSignerDestroy({
          id: item.id
        }).then(res => {
          // 执行删除操作，可以根据索引或唯一标识符删除对应的数据项
          data.dataList.splice(index, 1);
          // 调用 z-paging 的 complete 方法更新列表
          // data.paging.value.complete(data.dataList)
        });
      }
    }
  });
}

</script>
<style scoped lang="scss" src="/static/css/contract/signed.scss"></style>